<template>
  <div class="content-title">
    <img :src="imgHost" alt="" />
    <h1>{{ contentTitle?.title }}</h1>
    <p>{{ contentTitle?.synopsis }}</p>
  </div>
</template>

<script>
export default {
  name: "ContentTitle",
  data() {
    return {
      imgHost: "",
      contentTitle: {},
    };
  },
  async fetch() {
    //获取文章列表标题
    let classifyPath =
      this.$route.path.indexOf("/page/") != -1
        ? this.$route.path.slice(0, this.$route.path.indexOf("/page/"))
        : this.$route.path;
    const resContentTitle = await this.$api.getContentTitle({ classifyPath });
    this.contentTitle = resContentTitle.data[0];
    const resImgHost = await this.$api.filesHost();
    this.imgHost = resImgHost.data + "banner.jpg";
  },
};
</script>

<style lang="less" scoped>
@media only screen and (min-width: 1987px) {
  .content-title {
    img {
      width: 100%;
    }
  }
}
@media only screen and (max-width: 768px) {
  .content-title {
    height: 116px !important;
  }
}
.content-title {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  img {
    position: absolute;
    z-index: -99;
  }
  h1 {
    font-size: 26px;
  }
  p {
    font-size: 14px;
    margin-top: 20px;
  }
}
</style>